<template>
  <button class="ai-btn" :class="[colorStyle, variantStyle, sizeStyle, blockStyle]" :style="{'min-width': minWidth}" type="button" :disabled="disabled" @click="onclick">
    {{label}}
    <slot></slot>
  </button>
</template>

<script>
  /**
   * Button 按钮
   * @description 常用的操作按钮
   * @property {String} label 按钮文本
   * @property {String} color = [primary] 按钮的颜色
   * 	@value primary 主要颜色
   * @property {String} size = [sm|md|lg] 按钮的颜色，默认 'md'
   * 	@value sm 小
   * 	@value md 中
   * 	@value lg 大
   * @property {String} variant = [text|outline] 展现形式
   * 	@value text 文本
   * 	@value outline 中空外线
   * @property {Boolean} block 是否显示为块级元素，默认 false
   * @property {Boolean} disabled 是否禁用，默认 false
   * @event {Function} click 点击 Button 触发事件
   * @example <ai-button src="https://xxx"></ai-button>
   */
  export default {
    name: "ai-button",
    emits: ["click"],
    props: {
      label: String,
      color: String,
      size: String,
      minWidth: {
        type: Number,
        default: 80,
      },
      variant: String,
      block: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {

      };
    },
    computed: {
      colorStyle: {
        get: function() {
          return this.color ? ("ai-btn--" + this.color) : ""
        }
      },
      variantStyle: {
        get: function() {
          return this.variant ? ("ai-btn--" + this.variant) : ""
        }
      },
      sizeStyle: {
        get: function() {
          return this.size ? ("ai-btn--" + this.size) : ""
        }
      },
      blockStyle: {
        get: function() {
          return this.block ? "ai-btn--block" : ""
        }
      }
    },
    methods: {
      onclick() {
        this.$emit("click")
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_button.scss";
</style>